<template>
	<view class="page">
		<u-sticky>
			<view class="placeholder-bar" :style="{height: `${statusBarHeight}px`}"></view>
		</u-sticky>
		<u-sticky :offsetTop="statusBarHeight">
			<view class="top-bar">
				<view class="top-bar__l" @click="goBack()">
					<u-icon name="arrow-left" color="#232832" bold :size="20"></u-icon>
				</view>
				<view class="nickname">金金小张</view>
			</view>
		</u-sticky>
		<c-content bgColor="#FFFFFF" :top="statusBarHeight + 44" :padding="` 0 0 ${safeAreaBottom}px`">
			<view class="bg"></view>
			<view class="avatar">
				<u-avatar :size="84" src="/static/1.png"></u-avatar>
			</view>
			<view class="data">
				<view>587获赞</view>
				<view>16关注</view>
				<view>4479粉丝</view>
			</view>
			<view class="signature">
				这是个性签名
			</view>
			<view class="tags">
				<view class="tag sex">
					<text class="icon-girl"></text>
					<text>女</text>
				</view>
				<view class="tag">
					<text>IP:</text>
					<text>合肥</text>
				</view>
			</view>
			<view class="tabs">
				<view class="tab" :class="{active: active == '0'}" @click="active = '0'">作品&nbsp;123</view>
				<view class="tab" :class="{active: active == '1'}" @click="active = '1'">图库&nbsp;57</view>
				<view class="active-line" :style="{left: `${(50 * active)}%`}"></view>
			</view>
		</c-content>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				tabs: [{
						name: '作品'
					},
					{
						name: '图册'
					}
				],
				active: '0'
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #F4F4F7;
	}

	.top-bar {
		display: flex;
		align-items: center;
		height: 44px;
		background-color: #F4F4F7;

		&__l {
			padding: 0 13px;
		}

		.nickname {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			color: #232832;
			font-size: 20px;
			line-height: 20px;
		}
	}

	.content {

		&>view {
			padding-left: 22px;
			color: #232832;
			font-size: 15px;
			line-height: 18px;
			font-weight: 500;
		}

		.bg {
			height: 120px;
			background-color: #F4F4F7;
		}

		.avatar {
			transform: translateY(-28px);
		}

		.data {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&>view {
				margin-right: 10px;
			}
		}

		.signature {
			padding-top: 10px;
			margin-top: 15px;
		}

		.tags {
			display: flex;
			margin: 15px 0;

			.tag {
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 2px;
				background-color: #F4F4F7;
				padding: 2px 10px;
				margin-right: 10px;
				color: #6D6F79;
			}

			text {
				display: block;
				font-size: 12px;
				line-height: 15px;
			}

			text:nth-child(2) {
				margin-left: 4px;
			}

			.icon-girl {
				color: #FF3EC9;
			}

			.icon-man {
				color: #51A9FF;
			}
		}

		.tabs {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			border-bottom: 2px solid transparent;
			box-sizing: border-box;

			.active-line {
				position: absolute;
				width: 50%;
				height: 2px;
				background-color: #101317;
				left: 0;
				bottom: 0;
				transition: all .2s;
			}

			.tab {
				width: 100%;
				padding: 12px 0;
				color: #A4B0BE;
				font-size: 15px;
				line-height: 18px;
				font-weight: 500;
				text-align: center;
			}

			.tab.active {
				color: #232832;
				font-weight: 600;
			}
		}
	}
</style>